<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#stage{
				width:800px;
				height:400px;
				/*border:1px solid #333;*/
				margin:0 auto;
				/*perspective*/
				perspective:1200px;
			}
			#parent{
				width:800px;
				height:400px;
				/*border:1px solid #ddd;*/
				transform:rotatex(-30deg) rotatey(0deg);
				position:relative;
				transform-style:preserve-3d;

				/*调用动画*/
				animation:scroll 15s linear infinite;
			}
			#parent:hover{
				animation-play-state:paused;
			}
			#parent div{
				width:100px;
				height:100px;
				background:#E4393C;
				position:absolute;
				left:350px;
				top:150px;
			}

			#parent div:nth-child(1){
				transform:rotatey(0deg) translatez(200px);
			}
			#parent div:nth-child(2){
				transform:rotatey(60deg) translatez(200px);
			}
			#parent div:nth-child(3){
				transform:rotatey(120deg) translatez(200px);
			}
			#parent div:nth-child(4){
				transform:rotatey(180deg) translatez(200px);
			}
			#parent div:nth-child(5){
				transform:rotatey(240deg) translatez(200px);
			}
			#parent div:nth-child(6){
				transform:rotatey(300deg) translatez(200px);
			}

			/*声明动画*/
			@keyframes scroll{
				from{
					transform:rotatex(-30deg) rotatey(0deg);
				}
				to{
					transform:rotatex(-30deg) rotatey(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="stage">
			<div id="parent">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
		</div>
	</body>
</html>